<template>
    <el-dialog :title="title" :visible="dialogVisible" width="500px" @close="cancel" append-to-body v-dialogDrag>
        <el-form :model="form" label-width="80px" :rules="rules">
            <el-form-item label="角色名称">
                <el-input v-model="form.roleName" :disabled="true" />
            </el-form-item>
            <!-- <el-form-item label="权限字符">
          <el-input v-model="form.roleCode" :disabled="true" />
        </el-form-item> -->
            <el-form-item label="权限范围">
                <el-select v-model="form.dataScope" @change="dataScopeSelectChange" style="width: 100%;">
                    <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数据权限" v-show="form.dataScope === '2'">
                <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
                <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
                <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
                <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef"
                    node-key="id" :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候"
                    :props="{ label: 'label', children: 'children' }"></el-tree>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitDataScope">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup name="AddRoleData">
import { Ref, nextTick, ref, watch } from "vue";
import { Message, Tree } from "element-ui";
import { dictTypeInit } from "../dict/data";
import { useHandleTree } from "./HandleTree";
import { getDepart } from "@/requests/api/department";
import { dataScope, getRole } from "@/requests/api/role";

const props = defineProps({
    sys_normal_disable: {
        type: Array<any>, default: () => {
            return dictTypeInit
        }
    },
    title: String,
    openDataScope: Boolean,
});
const form = ref({
    roleName: "",
    roleCode: "",
    dataScope: "2",// todo 接口未给出值
    deptCheckStrictly: true,
    remark: "",
    businessId: ""
})
const dialogVisible = ref(false);
watch(() => props.openDataScope, (n) => {
    // console.log('打开界面', n, o)
    dialogVisible.value = n
}, { immediate: true });
const emit = defineEmits(["submitForm", "cancelData"]);
/** 取消按钮 */
function cancel() {
    emit('cancelData')
};
const rules = ref({
    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
    roleCode: [{ required: true, message: "角色编码不能为空", trigger: "blur" }]
});
/** 根据角色ID查询部门树结构 */
const getDeptTree = async (roleCode: string) => {
    // return deptTreeSelect(roleCode).then((res: any) => {
    //     deptOptions.value = res.depts;
    //     return res;
    // });
    const res = await getDepart(-1 || roleCode);
    console.log('部门数据', res)
    return res.data;
}
const initDataScope = async (roleCode: string) => {
    const res2: any = await getDeptTree(roleCode);
    const res1 = await getRole(roleCode)
    form.value = Object.assign({ dataScope: "2" }, res1.data);
    console.log('表单的值', form.value)
    nextTick(() => {
        if (deptRef.value) {
            deptRef.value.setCheckedKeys(res2.checkedKeys || []); // 未提供
        }
    });
}
/** 提交按钮（数据权限） */
const submitDataScope = () => {
    if (form.value.roleCode != undefined) {
        // form.value.deptIds = getDeptAllCheckedKeys();
        dataScope(form.value).then(() => {
            Message.success("修改成功");
            cancel();
        });
    }
}

const deptExpand = ref(true);
const deptNodeAll = ref(false);
/** 数据范围选项*/
const dataScopeOptions = ref([
    { value: "1", label: "全部数据权限" },
    { value: "2", label: "自定义数据权限" },
    { value: "3", label: "本部门数据权限" },
    { value: "4", label: "本部门及以下数据权限" },
    { value: "5", label: "仅本人数据权限" }
]);
const deptOptions = ref([]);

const deptRef: Ref<InstanceType<typeof Tree> | null> = ref(null)
const {
    handleCheckedTreeExpand,
    handleCheckedTreeNodeAll,
    handleCheckedTreeConnect,
    dataScopeSelectChange
} = useHandleTree(deptOptions, deptRef, form);

defineExpose({ initDataScope })
</script>
<style lang="scss" scoped></style>